<!doctype html>
<html lang="zh-CN">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="referrer" content="no-referrer-when-downgrade">
    

    <title>《Flutter UI问题分析小结》 | 早起的年轻人</title>
    <meta property="og:title" content="《Flutter UI问题分析小结》 - 早起的年轻人">
    <meta property="og:type" content="article">
        
    <meta property="article:published_time" content='2021-07-31T19:06:55&#43;08:00'>
        
        
    <meta property="article:modified_time" content='2021-07-31T19:06:55&#43;08:00'>
        
    <meta name="Keywords" content="Flutter，golang,go语言,go语言笔记,飞雪无情,java,android,博客,项目管理,python,软件架构,公众号,小程序">
    <meta name="description" content="《Flutter UI问题分析小结》">
        
    <meta name="author" content="luckly">
    <meta property="og:url" content="https://luckly.work/post/Flutter-UI%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/">
    <link rel="shortcut icon" href='/favicon.ico'  type="image/x-icon">

    <link rel="stylesheet" href='/css/normalize.css'>
    <link rel="stylesheet" href='/css/style.css'>
    <script type="text/javascript" src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    
    
    
        <link href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
    
    
    
    
        <link rel="stylesheet" href='/css/douban.css'>
    
        <link rel="stylesheet" href='/css/other.css'>
    
</head>

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<body>
    <header id="header" class="clearfix">
    <div class="container">
        <div class="col-group">
            <div class="site-name ">
                
                    <a id="logo" href="https://luckly.work/">
                        早起的年轻人
                    </a>
                
                <p class="description">专注于Flutter、Android、Java、Go语言(golang)、移动互联网、项目管理、软件架构</p>
            </div>
            <div>
                <nav id="nav-menu" class="clearfix">
                    <a class="current" href="https://luckly.work/">首页</a>
                    
                    <a  href="https://luckly.work/categories/" title="分类">分类</a>
                    
                    <a  href="https://luckly.work/tags/" title="标签">标签</a>
                    
                    <a  href="https://luckly.work/about/" title="关于我">关于我</a>
                    
                    <a  href="https://github.com/ITmxs/" title="github">github</a>
                    
                </nav>
            </div>
        </div>
    </div>
</header>

    <div id="body">
        <div class="container">
            <div class="col-group">

                <div class="col-8" id="main">
                    
<div class="res-cons">
    <style type="text/css">
    .post-toc {
        position: fixed;
        width: 200px;
        margin-left: -210px;
        padding: 5px 10px;
        font-family: Athelas, STHeiti, Microsoft Yahei, serif;
        font-size: 12px;
        border: 1px solid rgba(0, 0, 0, .07);
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.98);
        background-clip: padding-box;
        -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .125);
        box-shadow: 1px 1px 2px rgba(0, 0, 0, .125);
        word-wrap: break-word;
        white-space: nowrap;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 999;
        cursor: pointer;
        max-height: 70%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .post-toc .post-toc-title {
        width: 100%;
        margin: 0 auto;
        font-size: 20px;
        font-weight: 400;
        text-transform: uppercase;
        text-align: center;
    }

    .post-toc .post-toc-content {
        font-size: 15px;
    }

    .post-toc .post-toc-content>nav>ul {
        margin: 10px 0;
    }

    .post-toc .post-toc-content ul {
        padding-left: 20px;
        list-style: square;
        margin: 0.5em;
        line-height: 1.8em;
    }

    .post-toc .post-toc-content ul ul {
        padding-left: 15px;
        display: none;
    }

    @media print,
    screen and (max-width:1057px) {
        .post-toc {
            display: none;
        }
    }
</style>
<div class="post-toc" style="position: absolute; top: 188px;">
    <h2 class="post-toc-title">文章目录</h2>
    <div class="post-toc-content">
        <nav id="TableOfContents">
  <ul>
    <li><a href="#需求描述">需求描述</a></li>
    <li><a href="#flutter-方案">Flutter 方案</a></li>
    <li><a href="#遇到的问题">遇到的问题</a></li>
  </ul>

  <ul>
    <li><a href="#视觉规范的差异">视觉规范的差异</a></li>
    <li><a href="#safearea-的误用">SafeArea 的误用</a>
      <ul>
        <li><a href="#ui-分析">UI 分析</a></li>
        <li><a href="#safearea-介绍">SafeArea 介绍</a></li>
        <li><a href="#问题小节">问题小节</a></li>
      </ul>
    </li>
  </ul>
</nav>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var postToc = $(".post-toc");
        if (postToc.length) {
            var leftPos = $("#main").offset().left;
            if(leftPos<220){
                postToc.css({"width":leftPos-10,"margin-left":(0-leftPos)})
            }

            var t = postToc.offset().top - 20,
                a = {
                    start: {
                        position: "absolute",
                        top: t
                    },
                    process: {
                        position: "fixed",
                        top: 20
                    },
                };
            $(window).scroll(function () {
                var e = $(window).scrollTop();
                e < t ? postToc.css(a.start) : postToc.css(a.process)
            })
        }
    })
</script>
    <article class="post">
        <header>
            <h1 class="post-title">《Flutter UI问题分析小结》</h1>
        </header>
        <date class="post-meta meta-date">
            2021年7月31日
        </date>
        
        <div class="post-meta">
            <span>|</span>
            
            <span class="meta-category"><a href='/categories/flutter'>flutter</a></span>
            
        </div>
        
        
        <div class="post-meta">
            <span id="busuanzi_container_page_pv">|<span id="busuanzi_value_page_pv"></span><span>
                    阅读</span></span>
        </div>
        
        
        <div class="clear" style="display: none">
            <div class="toc-article">
                <div class="toc-title">文章目录</div>
            </div>
        </div>
        
        <div class="post-content">
            <blockquote>
<p>本文主要介绍</p>
</blockquote>
<p>我们的 Flutter 项目中自定义 AppBar 时 SafeArea 误用导致出现一个奇怪的 UI 问题。本文从这个问题出发，简单梳理了 Android 和 iOS 平台在 AppBar 视觉规范上的差异，然后使用 Dart DevTools 分析并成功解决问题。</p>
<p>[TOC]</p>
<h1 id="问题背景">问题背景</h1>
<h2 id="需求描述">需求描述</h2>
<p>最近我们项目接入 Flutter 并重写一些简单页面。项目中很多 Native 页面的 AppBar (为简单起见，本文将 Android 的 ActionBar/Toolbar 以及 iOS 的 Navigation Bar 统称为 AppBar)有类似这样的交互效果，</p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/ezgif1e54ad03a7341.gif">
            <img class="mx-auto" alt="组队排行榜" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/ezgif1e54ad03a7341.gif" />
        </a>
    </p>
<p>Flutter 页面也需要实现这种交互。一种做法是 Flutter 页面中保留原有的 Native AppBar，在 Flutter 列表滚动时通过 <code>MethodChannel</code> 通知 Native AppBar 更新其背景。不妨称这个方案为 Native 方案。另外一种做法是隐藏原有 Native AppBar，直接在 Flutter 层实现相同交互。这个方案称为 Flutter 方案。</p>
<p>显然，Native 方案实现起来较为繁琐，且似乎偏离了 <code>MethodChannel</code> 的合理使用场景。而 Flutter 方案可以避免跟 Native 层不必要的通信，所以我们选择了该方案。</p>
<h2 id="flutter-方案">Flutter 方案</h2>
<p><a href="https://github.com/flutter/flutter/tree/master/examples/flutter_gallery/lib/demo/fortnightly">FortnightlyDemo</a> (Flutter 官方 example)实现了自定义的 <code>ShortAppBar</code>：</p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725848702985.jpg">
            <img class="mx-auto" alt="ShortAppBar -w396" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725848702985.jpg" />
        </a>
    </p>
<p><code>ShortAppBar</code> 简化后的代码如下。</p>
<pre><code>class FortnightlyDemo extends StatelessWidget {
  static const String routeName = '/fortnightly';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fortnightly Demo',
      theme: _fortnightlyTheme,
      home: Scaffold(
        body: Stack(
          children: &lt;Widget&gt;[ FruitPage(), SafeArea(child: ShortAppBar()),],
        ),
      ),
    );
  }
}

class ShortAppBar extends StatelessWidget {
  const ShortAppBar({ this.onBackPressed });

  final VoidCallback onBackPressed;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 56,
      ...
    );
  }
}
</code></pre><p>注意这里一个细节，从视觉效果上来看这里的 <code>ShortAppBar</code> 并没有延伸到 Status Bar 下方，</p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726104959036.jpg">
            <img class="mx-auto" alt="ShortAppBar 没有延伸到 Status Bar 下方" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726104959036.jpg" />
        </a>
    </p>
<p>参考 <code>ShortAppBar</code> 的代码并加上必要的交互，我很快就实现了 <code>CustomAppBar</code>。
而我们项目中要求 <code>CustomAppBar</code> 能延伸 Status Bar 下方。给 <code>SafeArea</code> 套上一个 <code>Container</code> 就可以实现这种效果。</p>
<pre><code>Container(
  color: appBarColor,
  child: SafeArea(child: CustomAppBar())
)
</code></pre><p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726105059869.jpg">
            <img class="mx-auto" alt="ShortAppBar 延伸到 Status Bar 下方" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726105059869.jpg" />
        </a>
    </p>
<h2 id="遇到的问题">遇到的问题</h2>
<p><code>CustomAppBar</code> 在 Android 上的效果还不错，在 iPhone 7 上也能接受(高度偏大一点点)，但在 iPhone 11 上的实际效果显得很违和了：</p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg">
            <img class="mx-auto" alt="CustomAppBar 在 iPhone 11 上偏高 -w301" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg" />
        </a>
    </p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725911634410.jpg">
            <img class="mx-auto" alt="CustomAppBar 比原生应用的 AppBar 要高 -w331" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725911634410.jpg" />
        </a>
    </p>
<p>如上图，<code>CustomAppBar</code> 在 iPhone 11 上比原生应用的 AppBar 严重偏高。</p>
<h1 id="问题分析">问题分析</h1>
<p>为什么 <code>CustomAppBar</code> 在 Android 机器上看起来很好，在 iOS (尤其是 iPhone 11)上却严重偏高？</p>
<p>Flutter 可以在 Android 平台和 iOS 平台上在像素级别无差别地进行绘制，这是它的强大之处。但不容忽视的是，Android 视觉规范天生跟 iOS 有差异，如果不考虑并尊重这些差异而强行无差别绘制，肯定会导致某一端看起来怪怪的。</p>
<p>所以很显然问题的一个原因是 <code>CustomAppBar</code> 的实现没有考虑平台差异。另一个原因则是 <code>SafeArea</code> 的误用导致 <code>CustomAppBar</code> 进一步偏高。接下来就这两个原因分别展开。</p>
<h2 id="视觉规范的差异">视觉规范的差异</h2>
<p>首先得承认 Android 和 iOS 视觉上天生存在某些不一致。 (这也是 Flutter 分别提供 material 和 cupertino 风格控件的原因)</p>
<p>根据 <a href="https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/">iOS Navigation Bar 设计规范</a>，标准的 AppBar 高度是 44pt (不包括 Status Bar)。</p>
<p>根据 <a href="https://material.io/develop/android/">Android Material Design 设计规范</a>，Status Bar 高度是 24dp，标准的 AppBar(Action Bar) 高度是 56dp。</p>
<p><a href="https://github.com/flutterchina/gitme">Gitme</a> 是用 Flutter 实现的应用，不过它是 Material Design 风格的，在 iOS 上看起来是这样：</p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725930597849.jpg">
            <img class="mx-auto" alt="Gitme -w359" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725930597849.jpg" />
        </a>
    </p>
<p>总觉得哪里怪是不是？没错，这里的 AppBar 太高！</p>
<p>所以第一个改进就是根据当前系统为 <code>CustomAppBar</code> 选择合适的高度。修改后的示意代码如下：</p>
<pre><code>class CustomAppBar extends StatelessWidget {
  const CustomAppBar({ this.onBackPressed });

  final VoidCallback onBackPressed;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: isAndroid ? 56 : 44,
      ...
    );
  }
}
</code></pre><hr>
<p>事实上，Flutter 分别为 material 和 cupertino 提供了符合各自设计规范的 <a href="https://flutter.dev/docs/catalog/samples/basic-app-bar">AppBar</a> 和 <a href="https://api.flutter.dev/flutter/cupertino/CupertinoNavigationBar-class.html">CupertinoNavigationBar</a>，以简化应用开发。</p>
<p>你可能会问，既然有了 AppBar 和 CupertinoNavigationBar，能不能这样处理？</p>
<pre><code>class AnotherCustomAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (isAndroid) {
        return AppBar();
    } else if (isIOS) {
        return CupertinoNavigationBar();
    } else {
    }
  }
}
</code></pre><p><code>AnotherCustomAppBar</code> 理论上更简单优雅，但实践发现有以下问题：</p>
<ul>
<li><code>AppBar</code> 的高度是 56dp，而我们Android端应用的规范是 50dp，所以需要调整 <code>AppBar</code> 高度</li>
<li><code>AppBar</code> 在 Android 端缺并不是沉浸式风格(status bar 和 AppBar 背景色不同)，所以需要对其进行适配</li>
<li><code>CupertinoNavigationBar</code> 背景色设置成透明仍然会遮挡背景图片 (why?)</li>
</ul>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730062923455.jpg">
            <img class="mx-auto" alt="Android 上 status bar 有不同背景色 -w295" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730062923455.jpg" />
        </a>
    </p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725942471237.jpg">
            <img class="mx-auto" alt="iOS 上背景图被 AppBar 遮挡 -w770" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725942471237.jpg" />
        </a>
    </p>
<p>再考虑到后期可能还会给自定义的 AppBar 添加更多功能，直接使用 Flutter SDK 提供的 <code>AppBar</code> 和 <code>CupertinoNavigationBar</code> 相对不可控，所以放弃了 <code>AnotherCustomAppBar</code> 方案。</p>
<hr>
<h2 id="safearea-的误用">SafeArea 的误用</h2>
<p>视觉规范差异能在一定程度解释 <code>CustomAppBar</code> 在 iOS 上高度过大的问题。但考虑到其实这个差异不太大 (56-44=12，应该只相差12个逻辑单位)，跟视觉上看到的高度偏差有所不符，所以仍然让人疑惑是否存在其他问题。</p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg">
            <img class="mx-auto" alt="AppBar 过高 -w301" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg" />
        </a>
    </p>
<p>肉眼感觉这里的 AppBar 怕不止 56pt 吧? 不过肉眼不靠谱，还是上工具实测。</p>
<h3 id="ui-分析">UI 分析</h3>
<p><a href="https://flutter.dev/docs/development/tools/devtools/overview">DevTools</a> 是 Dart 和 Flutter 下的性能测试与 bug 调试的工具。它的功能包括：</p>
<ul>
<li>检查 Flutter UI 布局</li>
<li>检查 Flutter app 性能问题</li>
<li>源码调试</li>
<li>内存诊断</li>
</ul>
<p>我们这里重点关注检查 Flutter UI 布局的功能。用法如下：</p>
<p>第一步，通过 <code>flutter attach</code> 连上 App 后，从 IDE 打开 DevTools。VS Code 使用 ⇧⌘P 调出如下窗口然后选择 “Open DevTools”</p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725956009978.jpg">
            <img class="mx-auto" alt="Dart DevTools -w629" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725956009978.jpg" />
        </a>
    </p>
<p>第二步，在打开的浏览器窗口中按以下步骤操作就可以检查目标 Widget。</p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725954425771.jpg">
            <img class="mx-auto" alt="Select Widget Mode -w1421" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725954425771.jpg" />
        </a>
    </p>
<p>我们感兴趣的 Widget 是 <code>CustomAppBar</code>。以下三张图从不同角度近距离观察它。</p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/safeareacustomappbarisok.jpg">
            <img class="mx-auto" alt="CustomAppBar 真实高度" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/safeareacustomappbarisok.jpg" />
        </a>
    </p>
<p>图一，从图中可以看出 <code>CustomAppBar</code> 的高度其实没有问题，正是预期中的 44pt (<code>CustomAppBar</code> 高度由 <code>CustomAppBarSize</code> 限制)</p>
<hr>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725961591573.jpg">
            <img class="mx-auto" alt="CustomAppBar 可见高度 -w1117" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725961591573.jpg" />
        </a>
    </p>
<p>图二，从图中可以看出 <code>CustomAppBar</code> 的高度看似偏高很多。</p>
<ul>
<li>可以看到红色框中的 <code>SafeArea</code> 为 <code>CustomAppBar</code> 添加了一个不正常的 <code>Padding</code>，bottom padding 为 34</li>
<li><code>Padding</code> 本身是不可见的，所以通常不会有影响。不过 <code>SafeArea</code> 的父节点是一个可见的 <code>Container</code>，所以看起来 AppBar 偏高</li>
</ul>
<hr>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725963633326.jpg">
            <img class="mx-auto" alt="CustomAppBar 高度受 padding 影响 -w1096" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725963633326.jpg" />
        </a>
    </p>
<p>图三，图中的 <code>CustomAppBar</code> 的高度正常。</p>
<ul>
<li><code>SafeArea</code> 同样为 <code>CustomAppBar</code> 添加了 <code>Padding</code>。不过这一回，bottom padding 为0</li>
<li><code>SafeArea</code> 的父节点同样是一个可见的 <code>Container</code>，但由于 bottom padding 为0，所以看起来 AppBar 高度正常</li>
</ul>
<p>至此可以初步定位到问题跟 <code>SafeArea</code> 有关(我们使用 <code>SafeArea</code> 来适配刘海屏设备)。继续分析前先快速了解下 <a href="https://api.flutter.dev/flutter/widgets/SafeArea-class.html">SafeArea</a>。如果你熟悉这个 Widget 建议直接略过下一节。</p>
<h3 id="safearea-介绍">SafeArea 介绍</h3>
<p>再来说说 SafeArea。iPhone X 首次使用刘海屏，并且屏幕的可显示区域也不再是方方正正的了。这就带来如下一个问题：</p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730072986793.jpg">
            <img class="mx-auto" alt="异形屏导致内容显示不全 -w345" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730072986793.jpg" />
        </a>
    </p>
<p>所以也就有了 SafeArea。这个<a href="https://www.youtube.com/watch?v=lkF0TQJO0bA">视频</a>简单生动地介绍了 <a href="https://api.flutter.dev/flutter/widgets/SafeArea-class.html">SafeArea</a>。</p>
<p><code>SafeArea</code> 的代码很少，所以这里就直接贴上来了。</p>
<pre><code>/// A widget that insets its child by sufficient padding to avoid intrusions by
/// the operating system.
///
class SafeArea extends StatelessWidget {

  /// Whether to avoid system intrusions on the left.
  final bool left;

  /// Whether to avoid system intrusions at the top of the screen, typically the
  /// system status bar.
  final bool top;

  /// Whether to avoid system intrusions on the right.
  final bool right;

  /// Whether to avoid system intrusions on the bottom side of the screen.
  final bool bottom;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMediaQuery(context));
    final MediaQueryData data = MediaQuery.of(context);
    EdgeInsets padding = data.padding;
    // Bottom padding has been consumed - i.e. by the keyboard
    if (data.padding.bottom == 0.0 &amp;&amp; data.viewInsets.bottom != 0.0 &amp;&amp; maintainBottomViewPadding)
      padding = padding.copyWith(bottom: data.viewPadding.bottom);

    return Padding(
      padding: EdgeInsets.only(
        left: math.max(left ? padding.left : 0.0, minimum.left),
        top: math.max(top ? padding.top : 0.0, minimum.top),
        right: math.max(right ? padding.right : 0.0, minimum.right),
        bottom: math.max(bottom ? padding.bottom : 0.0, minimum.bottom),
      ),
      child: MediaQuery.removePadding(
        context: context,
        removeLeft: left,
        removeTop: top,
        removeRight: right,
        removeBottom: bottom,
        child: child,
      ),
    );
  } 
}
</code></pre><p>本质上来说，<code>SafeArea</code> 会主动为其 child 加上 <code>Padding</code> 以避免 UI 超出屏幕。</p>
<ul>
<li><code>SafeArea</code> 的四个属性 <code>left</code>,<code>top</code>,<code>right</code>, <code>bottom</code> 分别用于控制是否对 child 的各个边界做 safe 处理</li>
<li>需要特别注意的是，<strong>这四个属性默认是 <code>true</code></strong>。</li>
</ul>
<h3 id="问题小节">问题小节</h3>
<p>为了适配 iPhone X 等设备，我们会为 <code>CustomAppBar</code> 给添加 <code>SafeArea</code> 以避免内容显示不全。为了保证 <code>CustomAppBar</code> 能延伸到 Status Bar 下方，又在最外层加上了 <code>Container</code> 。适配代码如下：</p>
<pre><code>Container(
  child: SafeArea(
    child: CustomAppBar())
)
</code></pre><p><code>SafeArea</code> 底层调用 <code>MediaQuery.of</code> 来构建合理的 <code>Padding</code> 对象。一开始我并没有注意到 <code>MediaQuery.of(context).padding.bottom</code> 的返回值在不同机型上有区别。比如，由于是带圆角的屏幕，在 iPhone 11 上 <code>MediaQuery.of(context).padding.bottom</code> 返回值为 <code>34pt</code>。而在方形屏幕上该值为 <code>0pt</code>。见下图：</p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725981523931.jpg">
            <img class="mx-auto" alt="iPhone 11 上 padding.bottom 的返回值 -w908" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725981523931.jpg" />
        </a>
    </p>
<p>另一方面，我没有注意到 <code>SafeArea.bottom</code> 值默认为 <code>true</code>。所以这里的 <code>padding.bottom</code> 返回的 <code>34pt</code> 被错误地用作 <code>CustomAppBar</code> 的 bottom padding，而最外层带红色背景的 <code>Container</code> 会让 <code>Padding</code> 占据的区域变得可见。</p>
<p>最终，各种因素的综合影响导致 <code>CustomAppBar</code> 高度看起来严重偏大，如下图：</p>
<p>
        <a data-fancybox="gallery" href="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg">
            <img class="mx-auto" alt="CustomAppBar 偏高 -w301" src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg" />
        </a>
    </p>
<p>找到原因后，对代码进行第二个改进：指定 <code>SafeArea.bottom</code> 为 <code>false</code>。至此，问题解决！</p>
<pre><code>SafeArea(
  bottom: false,  
  child: CustomAppBar()
)
</code></pre><hr>
<p><strong>补充</strong>：为什么 <code>CupertinoNavigationBar</code> 不会有高度问题，它是怎么处理的？</p>
<p>我翻了下源码，果然也是将 <code>bottom</code> 设置为 <code>false</code>。</p>
<pre><code>// flutter/packages/flutter/lib/src/cupertino/nav_bar.dart
...
return SizedBox(
  height: _kNavBarPersistentHeight + MediaQuery.of(context).padding.top,
  child: SafeArea(
    bottom: false,
    child: paddedToolbar,
  ),
);
</code></pre><p>这从另一个角度印证了前面的分析以及解决方法是正确的。</p>
<hr>
<h1 id="总结">总结</h1>
<p>本文记录了 Flutter 项目中自定义 AppBar 时遇到的一个 UI 问题。问题主要原因在于：</p>
<ul>
<li>Android 和 iOS 视觉规范的差异</li>
<li><code>SafeArea</code> 的误用</li>
</ul>
<p>先从讨论了Android 和 iOS 视觉规范的差异对 Flutter UI 开发可能存在的影响，并使用 <a href="https://flutter.dev/docs/development/tools/devtools/overview">Dart DevTools</a> 对 <code>SafeArea</code> 误用问题进行分析。</p>
<p>再梳理了 <code>SafeArea</code> 的误用是如何影响 <code>CustomAppBar</code> 的高度的。</p>
<ul>
<li>首先，<code>SafeArea</code> 缺省的 <code>bottom</code> 为 <code>true</code></li>
<li>第二，iPhone 11 上 <code>MediaQuery.of(context).padding.bottom</code> 返回值为 <code>34pt</code></li>
<li>最后，<code>Container</code> 导致由 <code>SafeArea</code> 添加的 <code>Padding</code> 占据的区域可见</li>
</ul>
<p>基于上述分析对 <code>CustomAppBar</code> 的进行两处改进，</p>
<ul>
<li>
<p>根据当前系统为 <code>CustomAppBar</code> 选择合适的高度</p>
</li>
<li>
<p>确保正确使用</p>
<pre><code>SafeArea
</code></pre><p>，避免产生不正确的可见区域。记住这两点，</p>
<ul>
<li><code>SafeArea</code> 会为内层的 child 添加 <code>Padding</code></li>
<li><code>SafeArea</code> 外层的 <code>Container</code> 会导致 <code>Padding</code> 占据的区域可见</li>
</ul>
</li>
</ul>
<p>通过这两处改进，成功解决自定义 AppBar 高度过大的问题，完美适配 iPhone 11。</p>
        </div>

        
<div class="post-archive">
    <ul class="post-copyright">
        <li><strong>原文作者：</strong><a rel="author" href="https://luckly.work/">luckly</a></li>
        <li style="word-break:break-all"><strong>原文链接：</strong><a href="https://luckly.work/post/Flutter-UI%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/">https://luckly.work/post/Flutter-UI%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/</a></li>
        <li><strong>版权声明：</strong>本作品采用<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议</a>进行许可，非商业转载请注明出处（作者，原文链接），商业转载请联系作者获得授权。</li>
    </ul>
</div>
<br/>



        

<div class="post-archive">
    <h2>See Also</h2>
    <ul class="listing">
        
        <li><a href="/post/Flutter%E4%B8%8D%E8%A6%81%E6%8B%85%E5%BF%83%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E5%99%A8/">《Flutter不要担心垃圾回收器》</a></li>
        
        <li><a href="/post/Dart%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E4%B9%8BStream/">《Dart异步编程之Stream》</a></li>
        
        <li><a href="/post/Flutter%E5%BC%95%E6%93%8E%E5%A5%94%E6%BA%83%E5%88%86%E6%9E%90%E6%96%B9%E6%B3%95%E7%AE%80%E4%BB%8B/">《Flutter引擎奔溃分析方法简介》</a></li>
        
        <li><a href="/post/flutter%E6%98%AF%E5%A6%82%E4%BD%95%E5%B7%A5%E4%BD%9C%E7%9A%84/">《Flutter是如何工作的》</a></li>
        
        <li><a href="/post/flutterOverlay%E7%94%A8%E6%B3%95/">《Flutter—Overlay用法》</a></li>
        
    </ul>
</div>


        <div class="post-meta meta-tags">
            
            <ul class="clearfix">
                
                <li><a href='/tags/flutter'>flutter</a></li>
                
            </ul>
            
        </div>
    </article>
    
    

    
    
    <div class="post bg-white">
      <script src="https://utteranc.es/client.js"
            repo= "https://github.com/ITmxs/repo"
            issue-term="pathname"
            theme="github-light"
            crossorigin="anonymous"
            async>
      </script>
    </div>
    
</div>

                    <footer id="footer">
    <div>
        &copy; 2021 <a href="https://luckly.work/">早起的年轻人 By luckly</a>
        
        | <a rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">粤ICP备2021号-1</a>
        
    </div>
    <br />
    <div>
        <div class="github-badge">
            <a href="https://juejin.cn/user/3843548384077192" target="_black" rel="nofollow"><span class="badge-subject">Powered by</span><span class="badge-value bg-blue">掘金</span></a>
        </div>
        <div class="github-badge">
            <a href="https://space.bilibili.com/480883651" target="_black"><span class="badge-subject">Design by</span><span class="badge-value bg-brightgreen">早起的年轻人</span></a>
        </div>
        <div class="github-badge">
            <a href="https://cloud.tencent.com/developer/user/6702670" target="_black"><span class="badge-subject">Theme</span><span class="badge-value bg-yellowgreen">云社区</span></a>
        </div>
    </div>
</footer>


    
    <script type="text/javascript">
        window.MathJax = {
            tex2jax: {
                inlineMath: [['$', '$']],
                processEscapes: true
                }
            };
    </script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script><script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

<a id="rocket" href="#top"></a>
<script type="text/javascript" src='/js/totop.js?v=0.0.0' async=""></script>



    <script type="text/javascript" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>




    <script src='/js/douban.js'></script>
    <script src="/js/copy-to-clipboard.js"></script>

                </div>

                <div id="secondary">
    <section class="widget">
        <form id="search" action='https://luckly.work/search/' method="get" accept-charset="utf-8" target="_blank" _lpchecked="1">
      
      <input type="text" name="q" maxlength="20" placeholder="Search">
      <input type="hidden" name="sitesearch" value="https://luckly.work/">
      <button type="submit" class="submit icon-search"></button>
</form>
    </section>
    
    <section class="widget">
        <h3 class="widget-title">最近文章</h3>
<ul class="widget-list">
    
    <li>
        <a href="https://luckly.work/xxx/xxx.html" title="信息化和信息系统">信息化和信息系统</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/%E4%BD%BF%E7%94%A8flutter%E5%88%9B%E5%BB%BA%E6%B8%85%E5%8D%95/" title="使用flutter创建清单">使用flutter创建清单</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/%E4%BD%BF%E7%94%A8flutter%E5%88%9B%E5%BB%BA%E5%B8%A6%E6%9C%89%E5%8A%A8%E7%94%BB%E7%9A%84%E5%88%9B%E6%84%8F%E6%B8%85%E5%8D%95/" title="使用flutter创建带有动画的创意清单">使用flutter创建带有动画的创意清单</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/%E4%BD%BF%E7%94%A8flutter%E5%88%9B%E5%BB%BA%E6%90%9C%E7%B4%A2%E6%A0%8F/" title="使用flutter创建搜索栏">使用flutter创建搜索栏</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/%E4%BD%BF%E7%94%A8flutter%E5%88%9B%E5%BB%BA%E5%93%8D%E5%BA%94%E5%BC%8F%E4%B8%8B%E6%8B%89%E5%AF%BC%E8%88%AA%E6%A0%8F/" title="使用flutter创建响应式下拉导航栏">使用flutter创建响应式下拉导航栏</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/Flutter%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%B9%E5%87%BA%E5%8A%A8%E7%94%BB/" title="Flutter自定义弹出动画">Flutter自定义弹出动画</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/Flutter_WEB/" title="Flutter_WEB">Flutter_WEB</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/Flutter%E7%B3%BB%E5%88%97%E5%88%97%E8%A1%A8%E5%92%8C%E7%BD%91%E6%A0%BC/" title="Flutter系列列表和网格">Flutter系列列表和网格</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/Flutter%E8%A7%86%E8%A7%89%E9%87%8D%E5%8F%A0%E6%8C%87%E5%8D%97paddingviewpadding%E5%92%8Cviewinsets/" title="Flutter视觉重叠指南padding，viewpadding和viewinsets">Flutter视觉重叠指南padding，viewpadding和viewinsets</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/Flutter-ListView-%E5%92%8CScrollPhysics%E8%AF%A6%E7%BB%86%E4%BB%8B%E7%BB%8D/" title="Flutter ListView 和ScrollPhysics详细介绍">Flutter ListView 和ScrollPhysics详细介绍</a>
    </li>
    
</ul>
    </section>

    
<section class="widget">
    <h3 class="widget-title" style="color:red">福利派送</h3>
    <ul class="widget-list">
        
        <li>
            <a href="https://blog.csdn.net/qq_39132095?spm=1001.2101.3001.5343" title="我的CSDN" target="_blank" style="color:red">
                
                    <img src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/flutter.png">
                
            </a>
        </li>
        
        <li>
            <a href="https://space.bilibili.com/480883651" title="我的哔哩哔哩" target="_blank" style="color:red">
                
                    <img src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/flutter.png">
                
            </a>
        </li>
        
        <li>
            <a href="https://www.zhihu.com/people/yimi-yang-guang-96-65" title="我的知乎" target="_blank" style="color:red">
                
                    <img src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/flutter.png">
                
            </a>
        </li>
        
    </ul>
</section>


    <section class="widget">
        <h3 class="widget-title"><a href='/categories/'>分类</a></h3>
<ul class="widget-list">
    
    <li><a href="https://luckly.work/categories/Go/">Go (1)</a></li>
    
    <li><a href="https://luckly.work/categories/IT/">IT (1)</a></li>
    
    <li><a href="https://luckly.work/categories/Mysql/">Mysql (1)</a></li>
    
    <li><a href="https://luckly.work/categories/Nginx/">Nginx (1)</a></li>
    
    <li><a href="https://luckly.work/categories/YouTube%E8%A7%86%E9%A2%91%E4%B8%8B%E8%BD%BD/">YouTube视频下载 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/android/">android (6)</a></li>
    
    <li><a href="https://luckly.work/categories/dart/">dart (8)</a></li>
    
    <li><a href="https://luckly.work/categories/Flutter/">Flutter (141)</a></li>
    
    <li><a href="https://luckly.work/categories/git/">git (3)</a></li>
    
    <li><a href="https://luckly.work/categories/Go/">Go (4)</a></li>
    
    <li><a href="https://luckly.work/categories/ios/">ios (1)</a></li>
    
    <li><a href="https://luckly.work/categories/linux/">linux (1)</a></li>
    
    <li><a href="https://luckly.work/categories/read/">读书笔记 (6)</a></li>
    
    <li><a href="https://luckly.work/categories/redis/">redis (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99/">个人资料 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%B9%A6%E5%8D%95/">书单 (8)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%B9%A6%E8%AF%84/">书评 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E7%AE%A1%E7%90%86%E5%B8%88/">信息系统管理师 (8)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86%E5%B8%88/">信息系统项目管理师 (16)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%8E%9F%E5%88%99/">原则 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF/">原生通讯 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%9F%BA%E7%A1%80/">基础 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%A4%8D%E5%88%A9%E6%95%88%E5%BA%94/">复利效应 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%AE%89%E8%A3%85%E6%95%99%E7%A8%8B/">安装教程 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%B0%91%E6%9C%89%E4%BA%BA%E8%B5%B0%E7%9A%84%E8%B7%AF/">少有人走的路 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%BF%83%E8%AF%AD/">心语 (3)</a></li>
    
    <li><a href="https://luckly.work/categories/%E6%8F%92%E4%BB%B6/">插件 (2)</a></li>
    
    <li><a href="https://luckly.work/categories/%E6%95%99%E5%AD%A6/">教学 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%8E%8B%E9%98%B3%E6%98%8E/">王阳明 (3)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%94%B5%E5%AD%90%E4%B9%A6/">电子书 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%99%BB%E9%99%86%E8%A1%A8%E5%8D%95/">登陆表单 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%A8%BB%E7%9B%9B%E5%92%8C%E5%A4%AB/">稻盛和夫 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%A9%B7%E7%88%B8%E7%88%B8%E5%AF%8C%E7%88%B8%E7%88%B8/">穷爸爸富爸爸 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%B2%BE%E8%BF%9B/">精进 (3)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%BC%96%E7%A8%8B/">编程 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%B4%A2%E5%8A%A1%E8%87%AA%E7%94%B1%E4%B9%8B%E8%B7%AF/">财务自由之路 (2)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%B7%91%E6%AD%A5/">跑步 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82/">路由传参 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%B7%AF%E7%BA%BF/">路线 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%BD%AF%E4%BB%B6%E5%AE%9E%E6%96%BD/">软件实施 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E9%98%B3%E6%98%8E%E5%BF%83%E5%AD%A6/">阳明心学 (3)</a></li>
    
    <li><a href="https://luckly.work/categories/%E9%A1%B9%E7%9B%AE/">项目 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E9%AD%85%E5%8A%9B/">魅力 (1)</a></li>
    
</ul>
    </section>

    <section class="widget">
        <h3 class="widget-title"><a href='/tags/'>标签</a></h3>
<div class="tagcloud">
    
    <a href="https://luckly.work/tags/go/">go</a>
    
    <a href="https://luckly.work/tags/IT/">IT</a>
    
    <a href="https://luckly.work/tags/Mysql/">Mysql</a>
    
    <a href="https://luckly.work/tags/Nginx/">Nginx</a>
    
    <a href="https://luckly.work/tags/YouTube%E8%A7%86%E9%A2%91%E4%B8%8B%E8%BD%BD/">YouTube视频下载</a>
    
    <a href="https://luckly.work/tags/android/">android</a>
    
    <a href="https://luckly.work/tags/dart/">dart</a>
    
    <a href="https://luckly.work/tags/flutter/">flutter</a>
    
    <a href="https://luckly.work/tags/git/">git</a>
    
    <a href="https://luckly.work/tags/go/">go</a>
    
    <a href="https://luckly.work/tags/ios/">ios</a>
    
    <a href="https://luckly.work/tags/linux/">linux</a>
    
    <a href="https://luckly.work/tags/redis/">redis</a>
    
    <a href="https://luckly.work/tags/%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99/">个人资料</a>
    
    <a href="https://luckly.work/tags/%E4%B9%A6%E5%8D%95/">书单</a>
    
    <a href="https://luckly.work/tags/%E4%B9%A6%E8%AF%84/">书评</a>
    
    <a href="https://luckly.work/tags/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E7%AE%A1%E7%90%86%E5%B8%88/">信息系统管理师</a>
    
    <a href="https://luckly.work/tags/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86%E5%B8%88/">信息系统项目管理师</a>
    
    <a href="https://luckly.work/tags/%E5%85%A5%E9%97%A8/">入门</a>
    
    <a href="https://luckly.work/tags/%E5%8E%9F%E5%88%99/">原则</a>
    
    <a href="https://luckly.work/tags/%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF/">原生通讯</a>
    
    <a href="https://luckly.work/tags/%E5%9F%BA%E7%A1%80/">基础</a>
    
    <a href="https://luckly.work/tags/%E5%A4%8D%E5%88%A9%E6%95%88%E5%BA%94/">复利效应</a>
    
    <a href="https://luckly.work/tags/%E5%AE%89%E8%A3%85%E6%95%99%E7%A8%8B/">安装教程</a>
    
    <a href="https://luckly.work/tags/%E5%B0%91%E6%9C%89%E4%BA%BA%E8%B5%B0%E7%9A%84%E8%B7%AF/">少有人走的路</a>
    
    <a href="https://luckly.work/tags/%E5%BF%83%E8%AF%AD/">心语</a>
    
    <a href="https://luckly.work/tags/%E6%8F%92%E4%BB%B6/">插件</a>
    
    <a href="https://luckly.work/tags/%E6%95%99%E5%AD%A6/">教学</a>
    
    <a href="https://luckly.work/tags/%E7%8E%8B%E9%98%B3%E6%98%8E/">王阳明</a>
    
    <a href="https://luckly.work/tags/%E7%94%B5%E5%AD%90%E4%B9%A6/">电子书</a>
    
    <a href="https://luckly.work/tags/%E7%99%BB%E9%99%86%E8%A1%A8%E5%8D%95/">登陆表单</a>
    
    <a href="https://luckly.work/tags/%E7%A8%BB%E7%9B%9B%E5%92%8C%E5%A4%AB/">稻盛和夫</a>
    
    <a href="https://luckly.work/tags/%E7%A9%B7%E7%88%B8%E7%88%B8%E5%AF%8C%E7%88%B8%E7%88%B8/">穷爸爸富爸爸</a>
    
    <a href="https://luckly.work/tags/%E7%B2%BE%E8%BF%9B/">精进</a>
    
    <a href="https://luckly.work/tags/%E7%BC%96%E7%A8%8B/">编程</a>
    
    <a href="https://luckly.work/tags/%E8%AF%97/">诗</a>
    
    <a href="https://luckly.work/tags/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">读书笔记</a>
    
    <a href="https://luckly.work/tags/%E8%B4%A2%E5%8A%A1%E8%87%AA%E7%94%B1%E4%B9%8B%E8%B7%AF/">财务自由之路</a>
    
    <a href="https://luckly.work/tags/%E8%B7%91%E6%AD%A5/">跑步</a>
    
    <a href="https://luckly.work/tags/%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82/">路由传参</a>
    
    <a href="https://luckly.work/tags/%E8%B7%AF%E7%BA%BF/">路线</a>
    
    <a href="https://luckly.work/tags/%E8%BD%AF%E4%BB%B6%E5%AE%9E%E6%96%BD/">软件实施</a>
    
    <a href="https://luckly.work/tags/%E9%80%9A%E8%AE%AF%E5%BD%95/">通讯录</a>
    
    <a href="https://luckly.work/tags/%E9%98%B3%E6%98%8E%E5%BF%83%E5%AD%A6/">阳明心学</a>
    
    <a href="https://luckly.work/tags/%E9%A1%B9%E7%9B%AE/">项目</a>
    
    <a href="https://luckly.work/tags/%E9%AD%85%E5%8A%9B/">魅力</a>
    
</div>
    </section>

    
<section class="widget">
    <h3 class="widget-title">友情链接</h3>
    <ul class="widget-list">
        
        <li>
            <a target="_blank" href="https://www.liwenzhou.com/" title="李文周">李文周的博客</a>
        </li>
        
        <li>
            <a target="_blank" href="http://www.xbzweb.com/" title="小包子的博客">小包子的博客</a>
        </li>
        
        <li>
            <a target="_blank" href="https://www.flysnow.org/" title="飞雪无情的博客">飞雪无情的博客</a>
        </li>
        
        <li>
            <a target="_blank" href="http://yuedu.baidu.com/ebook/14a722970740be1e640e9a3e" title="Android Gradle权威指南">Android Gradle权威指南</a>
        </li>
        
        <li>
            <a target="_blank" href="https://gesdh.cn/" title="小格子">格子导航</a>
        </li>
        
        <li>
            <a target="_blank" href="https://itachi.xyz/" title="阿林">itachi&#39;s Blog</a>
        </li>
        
    </ul>
</section>


    <section class="widget">
        <h3 class="widget-title">其它</h3>
        <ul class="widget-list">
            <li><a href="https://luckly.work/index.xml">文章 RSS</a></li>
        </ul>
    </section>
</div>
            </div>
        </div>
    </div>
</body>

</html>